<template>
	<Layout :showBack="false" tabbar :innerBottom="true" :bstyle="{backgroundColor:'#F6F6F6'}">
		<template #title>消息</template>
		<ScrollRefresher @refresh="refresh" @tolower="tolower">
			<view v-for="(item,index) of list" :key="item.id" class="iflex jcc fill " style="margin-top:20rpx;">
				<u-swipe-action :show="item.show" :index="index" bg-color="#F6F6F6" @click="click" @open="open"
					style="width: 678rpx;" :options="options">
					<view class="iflex column message-item" @click.stop="tapToOrderDetail(item)">
						<view class="iflex fill message-item__header">
							{{item.title}}
							<view v-if="item.status == 0" class="iflex message-item__header__unread"></view>
						</view>
						<view class="iflex fill message-item__time">
							{{item.createTime}}
						</view>
						<view class="iflex fill message-item__content">
							<view class="ellipsis-line-clamp">
								{{item.msgContent}}
							</view>
						</view>
						<view class="iflex fill aic jcsb message-item__view-detail" @click.stop="tapToDetail(item)">
							<span>查看详情</span>
							<image src="/static/image/other/right.png" />
						</view>
					</view>
				</u-swipe-action>
			</view>
		</ScrollRefresher>
	</Layout>
	<LoginPopup></LoginPopup>
</template>

<script lang="ts" setup>
	import { setTabbar } from '@/utils/wx';
	import { ref, watchEffect } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import { useImStore, useAuthStore } from '@/stores';
	import type { AnyObj } from '@/types/global';
	import { getMessageList, deleteMessage } from '@/apis/message';
	import { useGetDataPaging } from '@/hooks/paging';
	setTabbar({ selected: 3 });

	const authStore = useAuthStore();

	function tapToDetail(item : AnyObj) {
		uni.navigateTo({
			url: `/pages/message/message-detail?id=${item.id}`
		})
	}

	const options = ref([
		{
			text: '删除',
			style: {
				backgroundColor: '#F65C5C'
			}
		}
	])

	function tapToOrderDetail(item : AnyObj) {
		if (item.orderId) {
			uni.navigateTo({
				url: `/pages-mine/order-detail/order-detail?orderId=${item.orderId}`
			})
		}
	}

	const { list, refresh, tolower } = useGetDataPaging({
		api: getMessageList,
		handlerData: (rows) : AnyObj[] => {
			for (const item of rows) {
				item.show = false;
			}
			return rows;
		}
	});

	function click(index) {
		// if (index1 == 1) {
		// 	this.list.splice(index, 1);
		// 	this.$u.toast(`删除了第${index}个cell`);
		// } else {
		// 	this.list[index].show = false;
		// 	this.$u.toast(`收藏成功`);
		// }
		// deleteMessage();
		const item = list.value[index];
		console.log('index', index);
		deleteMessage(item.id).then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				})
				return;
			}
			uni.showToast({
				icon: 'none',
				title: '删除成功'
			});
			setTimeout(() => {
				refresh();
			}, 1500);
		});
	}

	function open(index : number) {
		for (const item of list.value) {
			item.show = false;
		}
		list.value[index].show = true;
	}


	onShow(() => {
		if (!authStore.isLogin) {
			authStore.show();
			return;
		}
		refresh();
	})
</script>

<style scope lang="scss">
	.message-item {
		width: 678rpx;
		padding: 38rpx 28rpx;
		box-sizing: border-box;
		border-radius: 40rpx;
		background: #FFF;

		&__header {
			color: #000000;
			font-size: 36rpx;
			font-weight: 500;

			&__unread {
				margin-top: 10rpx;
				width: 16rpx;
				height: 16rpx;
				flex-shrink: 0;
				border-radius: 50%;
				margin-left: 12rpx;
				background-color: #F55;
			}
		}

		&__time {
			padding: 11rpx 0 17rpx 0;
			color: #7e7e7e;
			font-size: 24rpx;
			font-weight: 400;
		}

		&__view-detail {
			padding-top: 48rpx;
			color: #000000;
			font-size: 24rpx;
			font-weight: 400;

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
</style>